<template>
  <div class="view-container">
    <div class="filter-container">
      <el-form :model="formData" :rules="rules" size="small" label-position="right" class="filter-form-inline">
        <el-row :gutter="20" style="padding: 0px 20px">
          <el-col :lg="8" :xs="6">
            <el-form-item style="width: 100%" label="关键字">
              <el-input v-model="formData.keyWord" clearable placeholder="输入商销客户名称、编号、地址关键字搜索" />
            </el-form-item>
          </el-col>
          <el-col :lg="5" :xs="4">
            <el-form-item>
              <el-button class="border-btn" @click="empty">重置</el-button>
              <el-button type="primary" class="main-btn" @click="handleChange">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="main-content" style="padding-top: 0px">
      <div class="list-container">
        <table-tools>
          <template #left>
            <el-button v-auth="{ v: ['crm:product:create'] }" class="main-btn" size="small" type="primary"
              @click="createNewCom">新建商销客户</el-button>
          </template>
        </table-tools>
        <table-view :data="tableData" border style="width: 100%" @row-click="aloneClick">
          <el-table-column prop="sellerNumber" align="center" label="商销客户编号" show-overflow-tooltip />
          <el-table-column prop="sellerName" align="center" label="商销客户名称">
            <template #default="{ row }">
              {{ row.sellerName }}
            </template>
          </el-table-column>
          <el-table-column prop="creditCode" align="center" label="统一社会信用代码" show-overflow-tooltip />
          <el-table-column align="center" label="企业所在地" show-overflow-tooltip>
            <template #default="{ row }">
              {{ row.provinceName }}/{{ row.cityName }}/{{ row.areaName }}
            </template>
          </el-table-column>
          <el-table-column prop="address" align="center" label="详细地址" show-overflow-tooltip />
          <el-table-column prop="createdAt" align="center" label="创建时间" show-overflow-tooltip>
            <template #default="scope">
              <span>{{ dateFormat("yyyy-mm-dd", scope.row.createdAt) }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="sellerStatus" align="center" label="状态" show-overflow-tooltip>
            <template #default="{ row }">
              {{ getLabel("seller_status", row?.sellerStatus) }}
            </template>
          </el-table-column>
          <el-table-column prop="operation" align="center" label="操作" show-overflow-tooltip>
            <template #default="{ row }">
              <el-button type="text" @click="handlChange(row)">变更信息
              </el-button>
            </template>
          </el-table-column>
        </table-view>
        <Pagination v-model:page="formData.page" v-model:limit="formData.pageSize"
          style="display: flex; justify-content: flex-end" :total="total" @pagination="handlList" />
        <div />
      </div>
      <!-- 创建编辑弹框 -->
      <new-com ref="newComDialog" @succsessFormSign="succsessFormSign" />
    </div>
  </div>
</template>

<script>
import {
  defineComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  ref,
  toRefs,
  defineAsyncComponent,
} from "vue";
// import {newcoma} from "@/CRM/newcoma.js"
import { useRouter } from "vue-router";

export default defineComponent({
  name: "Details",
  components: {
    newCom: defineAsyncComponent(() => import("../modules/newCom.vue")),
  },
  setup() {
    const api = inject("api");
    const router = useRouter();
    const currentInstance = getCurrentInstance();
    const data = reactive({
      loading: false,
      formData: {
        keyWord: "",
        page: 1,
        pageSize: 20,
        from:'1'
      },
      optiones: [],
      tableData: [],
      total: 0,
      visible: false,
      newComDialog: null,
      formDatas: {},
    });

    // 搜索
    const handleChange = () => {
      data.formData.page = 1;
      handlList();
    };

    // 新建
    // const newComDialog = ref(null);
    const createNewCom = () => {
      data.newComDialog.open(null);
    };
    // 重置
    const empty = () => {
      data.formData = {
        keyWord: "",
        page: 1,
        pageSize: 20,
        from:'1'
      };
      handlList();
    };

    // 获取列表
    const handlList = () => {
      api.newComa.COMMERCIAL_LIST(data.formData).then((res) => {
        if (res.code === 0) {
          data.tableData = res.data.list || [];
          data.total = res.data.total;
        }
        console.log(data.formData);
      });
    };

    // 变更
    const handlChange = (row) => {
      data.newComDialog.open(row);
      data.formDatas = row;
    };

    // 单机表格
    const aloneClick = (row, column, event) => {
      if (column.label === "操作") return;
      router.push({
        name: "commercialnewDetails",
        query: { id: row.id },
      });
    };

    // 详情弹出框变更
    const succsessFormSign = () => {
      handlList();
    };

    onMounted(() => {
      handlList();
    });

    return {
      ...toRefs(data),
      empty,
      handleChange,
      handlList,
      handlChange,
      createNewCom,
      succsessFormSign,
      aloneClick,
    };
  },
});
</script>

<style lang="scss" scoped>
</style>
